<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-size: cover;
  &-con {
    .left {
      width: 450px;
      @media screen and (max-width: 990px) {
        width: 350px;
        left: 60px;
        top: 30px;
        position: absolute;
      }
      @media screen and (max-width: 767px) {
        display: none;
      }
    }
    .right {
      position: absolute;
      background: inherit;
      right: 20px;
      top: 80px;
      @media screen and (max-width: 990px) {
        right: 70px;
      }
      @media screen and (min-width: 767px) {
        width: 357px;
      }
      @media screen and (max-width: 767px) {
        position: static;
        margin: 0 auto;
        width: 100%;
      }
    }
    .ivu-card-head {
      padding: 0;
      border-bottom: 0;
      line-height: 0;
      background: #3a7bd7;
      text-align: center;
    }
    .ivu-card-body {
      background: rgba(255, 255, 255, 0.5);
      .ivu-input-group-prepend {
        background: white;
        border-radius: 3px;
        width: 40px;
      }
      .ivu-input-group > .ivu-input:last-child {
        border-left: none;
        box-shadow: none !important;
      }
      .ivu-input-large {
        height: 43px;
        &:focus {
          outline: none !important;
        }
      }
      .ivu-btn-large {
        font-size: 16px;
      }
    }
    position: absolute;
    top: 50%;
    margin-top: -280px;
    width: 900px;
    margin-left: -450px;
    left: 50%;

    @media screen and (max-width: 767px) {
      position: static;
      margin-top: 0;
      margin-left: 0;
      width: 100%;
      padding: 0 10px;
      padding-top: 10px;
    }

    // transform: translateY(-60%);
    &-header {
      width: 100%;
      @media screen and (min-width: 357px) and (max-width: 767px) {
        width: auto;
        max-width: 357px;
      }
      // font-size: 18px !important;
      // font-weight: 300;
      // text-align: center;
      // padding: 5px 0;
      // height: auto !important;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
    .login-buttons {
      margin-bottom: 0;
      display: flex;
      button {
        background: #85c325;
        border-color: #85c325;
        margin: 0 6px;
        font-size: 16px;
        padding-left: 16px;
        padding-right: 16px;
      }
      @media screen and (max-width: 767px) {
        display: block;
        button {
          display: block;
          margin: 0;
          width: 100%;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>

<template>
  <div class="login" :style="{backgroundImage: 'url(' + background + ')'}">
    <div class="login-con clearfix">
      <img src="../images/left.png" class="left" />
      <i-card :bordered="false" class="right">
        <img class="login-con-header" src="../images/login-title.png" slot="title" />
        <div class="form-con">
          <i-form ref="login-form" :model="form" :rules="rules">
            <i-form-item prop="userName">
              <i-input v-model="form.userName" placeholder="请输入用户账号" size="large">
                <span slot="prepend">
                  <i class="icon icon-user" style="font-size:20px;"></i>
                </span>
              </i-input>
            </i-form-item>
            <i-form-item prop="password">
              <i-input type="password" v-model="form.password" placeholder="请输入用户密码" size="large">
                <span slot="prepend">
                  <i class="icon icon-lock" style="font-size:20px;"></i>
                </span>
              </i-input>
            </i-form-item>
            <i-form-item prop="captcha">
              <div style="display:table">
                <div style="display:table-cell;width:100%;vertical-align:top;">
                  <i-input type="text" v-model="form.captcha" placeholder="请输入验证码" size="large">
                    <span slot="prepend">
                      <i class="icon icon-shield" style="font-size:20px;"></i>
                    </span>
                  </i-input>
                </div>
                <img style="margin-left:10px;display:table-cell;border:1px solid transparent;cursor:pointer;" v-if="this.time !== null" :src="captchaUrl" @click="refreshCaptcha()" title="点击图片刷新验证码" />
              </div>
            </i-form-item>
            <i-form-item class="login-buttons">
              <i-button style="margin-left:0" html-type="button" type="success" size="large" @click="handleSubmit(1)" :disabled="loading">教师登录</i-button>
              <i-button html-type="button" type="success" size="large" @click="handleSubmit(2)" :disabled="loading">学生登录</i-button>
              <i-button style="margin-right:0" html-type="button" type="success" size="large" @click="handleSubmit(3)" :disabled="loading">家长登录</i-button>
            </i-form-item>
          </i-form>
        </div>
      </i-card>
    </div>
    <e-e-footer></e-e-footer>
  </div>
</template>

<script>
// import Cookies from 'js-cookie'
import EEFooter from './components/footer'
export default {
  components: {
    EEFooter
  },
  computed: {
    captchaUrl() {
      return '/api/account/captcha?_=' + this.time
    }
  },
  mounted() {
    let query = this.$route.query
    let token = query && query.token
    if (token) {
      localStorage.setItem('ticket', token)
      this.$router.push({
        path: '/'
      })
    }
  },
  activated() {
    this.refreshCaptcha()
    this.form.userName = null
    this.form.password = null
    this.form.captcha = null
    this.$store.commit('init')
  },
  data() {
    return {
      background: require('../images/bg.jpg'),
      loading: false,
      time: null,
      form: {
        type: '1',
        userName: null,
        password: null,
        captcha: null
      },
      rules: {
        userName: [
          {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ],
        captcha: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    refreshCaptcha() {
      this.time = new Date().getTime()
    },
    handleSubmit(type) {
      const that = this
      that.form.type = type
      this.$refs['login-form'].validate(valid => {
        if (valid) {
          that.loading = true
          this.$http.post('/api/account/login', this.form).then(response => {
            that.loading = false
            if (response.data.success) {
              localStorage.setItem('ticket', response.data.ticket)
              this.$router.push({
                path: '/'
              })
            } else {
              that.form.password = null
              that.form.captcha = null
              this.refreshCaptcha()
            }
          })
        }
      })

      return false
    }
  }
}
</script>

<style>
</style>
